<div class="el-select {{class}} {{ size ? 'el-select--' + size : '' }}" ng-class="{ 'is-open': isOpen }">
  <div class="el-input el-input--suffix {{ size ? 'el-input--' + size : '' }}" ng-class="{ 'is-disabled': disabled, 'is-focus': focus }" ng-mouseenter="onMouseenter()" ng-mouseleave="onMouseleave()">
    <input class="el-input__inner" ng-disabled="disabled" type="text" placeholder="{{ placeholder }}" ng-click="toggle()"
      ng-model="ngModel" ng-change="onChange(ngModel)" readonly>
    <span class="el-input__suffix">
      <span class="el-input__suffix-inner">
        <i ng-if="!(clearable && ngModel && flag)" class="el-icon-arrow-up"></i>
        <i class="el-select__caret el-input__icon el-icon-circle-close" ng-if="clearable && ngModel && flag" ng-click="clear()"></i>
      </span>
    </span>
  </div>

  <div class="el-select-dropdown el-popper" ng-show="isOpen">
    <div class="el-scrollbar">
      <ul class="el-select-dropdown__list">
        <li class="el-select-dropdown__item" ng-repeat="option in filteredOptions = (optionItems | filter:searchFilter)"
          ng-class="{
                  'selected': isSelected(option.value),
                  'hover': hoverIndex === $index,
                  'is-disabled': option.disabled
              }" ng-click="selectOption(option)" ng-mouseenter="setHover($index)">
          {{ option.label }}
        </li>
      </ul>
    </div>
    <div x-arrow="" class="popper__arrow" style="left: 35px;"></div>
  </div>
</div>